 <template>
  <div id="main">
    <div class="content">

      <!-- 按钮部分 -->
      <div class="button">
        <div class="button1">
          <button class="bu" @click="changeAll">修改昵称</button>
          <button class="bu">修改头像</button>
          <button class="bu" @click="changePwd">修改密码</button>
          <button class="bu">修改邮箱</button>
        </div>
      </div>
      <!-- 资料部分 -->
      <div class="box" v-if="flag">
        <div class="inputbox" v-if="flag">
          <label for="account" style="margin-top: 60px; cursor: pointer"
            >用户名：</label
          >
          <input
            v-model="account"
            type="text"
            name="account"
            @click="account"
            onfocus="this.blur()"
            required=""
            value=""
          />
        </div>
        <div class="inputbox">
          <label for="name">昵称：</label>
          <input v-model="name" type="text" name="uid" required="" />
        </div>
        <!-- <div class="inputbox">
          <label for="account">账号：</label>
          <input v-model="account" type="text" name="account"   required="" />
        </div> -->
        <div class="inputbox">
          <label for="phone">电话：</label>
          <input v-model="phone" type="text" name="phone" required="" />
        </div>
        <div class="inputbox">
          <label for="birth">生日：</label>
          <input v-model="birth" type="text" name="birth" required="" />
        </div>
        <div class="inputbox">
          <label for="gender">性别：</label>
          <input v-model="gender" type="text" name="gender" required="" />
        </div>
        <div class="inputbox">
          <label for="address">地址：</label>
          <input v-model="address" type="text" name="address" required="" />
        </div>
        <button class="send" type="button" @click="submitCheck">Submit</button>
      </div>

    </div>
  </div>
</template>
<script >
import { mapState } from 'vuex';
export default {
  name: 'person',
  data() {
    return {
      id: '',
      name: '',
      password: '',
      password0: '',
      password1: '',
      email: '',
      gender: '',
      birth: '',
      phone: '',
      address: '',
      tipMessage: '',
      showbtn: true,
      flag: true,
      sec: '',
    };
  },
  computed: {
    ...mapState(['account']),
    ...mapState(['ownerId']),
  },
  methods: {
    //修改资料
    changeAll() {
      window.location.href = '/changeAll';
    },
    //修改密码
    changePwd() {
      this.flag = !this.flag;
    },
    //发送验证码
    async sendEmail() {
      try {
        const res = await this.$axios.post(`http://work.caike.online/user`, {
          action: 'email',
          email: this.email,
        });
        console.log(res);
        const info = res.data;
        if (info.num != null) {
          this.code = info.num;
          this.showbtn = false;
          //时间间隔
          this.sec = 300;
          setInterval(() => {
            this.sec = this.sec - 1;
            if (this.sec == 0) {
              this.showbtn = true;
            }
          }, 1000);
        } else {
          this.$message({
            message: '验证码发送失败',
            type: 'error',
            offset: 70,
          });
        }
      } catch (err) {
        this.$message({
          message: '发送失败,请刷新页面重试！',
          type: 'error',
          offset: 70,
        });
        console.log(err);
      }
    },
    validate() {
      // 表单验证
      if (this.email.length === 0) {
        this.tipMessage = '还没有填写邮箱！';
        return false;
      } else if (this.password0.length === 0) {
        this.tipMessage = '还没有填写密码！';
        return false;
      } else if (this.password.length < 8) {
        this.tipMessage = '密码长度不得小于8位';
        return false;
      } else if (this.password1.length === 0) {
        this.tipMessage = '还没有填写确认密码！';
        return false;
      } else if (this.checkemail.length === 0) {
        this.tipMessage = '还没有填写邮箱验证码！';
        res = false;
      } else if (this.password !== this.password1) {
        this.tipMessage = '两次密码输入不一致！';
        return false;
      }
      return true;
    },

    //提交按钮
    async submitCheck() {
      this.tipMessage = '';
      if (this.checkemail != this.code) {
        this.tipMessage = '邮箱验证码错误！';
        return;
      }
      if (this.validate) {
        try {
          const res = await this.$axios.post(`http://work.caike.online/user`, {
            id: this.ownerId,
            action: 'updateInfo',
            account: this.account,
            email: this.email,
            name: this.name,
            birth: this.birth,
            address: this.address,
            gender: this.gender,
            phone: this.phone,
          });
          console.log(res);
          const info = res.data;
          if (info.status === 1) {
            this.$message({
              message: '资料修改成功',
              type: 'success',
              offset: 70,
            });
            // window.location.href = '/person';
          } else {
            this.$message({
              message: '资料密码失败',
              type: 'error',
              offset: 70,
            });
            console.log('出现错误，发送失败！');
          }
        } catch (err) {
          this.$message({
            message: '发送失败',
            type: 'error',
            offset: 70,
          });
          console.log(err);
        }
      }
    },
    //接受数据
    async receive() {
      console.log('account=> ', this.account);
      try {
        // const res = await this.$axios.post(`${this.HOST}/user`, {
        const res = await this.$axios.post(`http://work.caike.online/user`, {
          action: 'getInfo',
          account: this.account,
        });
        console.log(res);
        const info = res.data.info;
        this.id = info.id;
        this.name = info.name;
        this.birth = info.birth;
        this.address = info.address;
        this.gender = info.gender;
        this.phone = info.phone;
      } catch (err) {
        // alert('登录失败呢'),
        this.$message({
          message: '访问失败',
          type: 'error',
          offset: 70,
        });
        console.log(err);
      }
    },
  },
  mounted() {
    this.receive();
  },
};
</script>
<style lang="less" scoped>
#main {
  // 由于图像的 z-index 是 -1，因此它在文本的后面出现
  position: fixed;
  top: 0;
  left: 0;

  background-position: center 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  /* // 用浮点数来定义缩放比例。不允许负值 */
  zoom: 1;
  width: 100%;
  height: 100%;

  // background-image: url('../assets/bg/1.jpeg');

  background-image: url(../assets/bg/0.jpeg);
  .content {
    margin-top: 60px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    // margin-left:0;
    // justify-content: flex-end;

    // background:black;

    .button {
      padding-top: 30px;
      width: 220px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      // align-content:center;
      // padding-right: 50px;
      // background: rgba(0, 0, 0, 0.2);
      border-right: 2px solid whitesmoke;
      border-image: linear-gradient(transparent, whitesmoke, transparent) 2 1;
      // background:black;
      //头像

      .button1 {
        display: flex;
        height: 100%;
        padding: 5px 20px;
        //  background:black;
        flex-direction: column;
        // justify-content: space-between;
      }

      .bu {
        height: 60px;
        background: rgba(0, 0, 0, 0.3);
        outline: none;
        color: white;
        font-size: 18px;
        border: 1px solid transparent;
        border-radius: 15px;
      }
      .bu:hover {
        color: #03a9f4;
        cursor: pointer;
        box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.664);
        transition: all 0.5s ease;
      }
    }
    .box {
    flex-grow: 1;

    padding: 50px;

    background: rgba(0, 0, 0, 0.3);
    /*背景颜色为黑色，透明度为0.8*/
    box-sizing: border-box;
    /*box-sizing设置盒子模型的解析模式为怪异盒模型*/
    box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.5);
    /*边框阴影  水平阴影0 垂直阴影15px 模糊25px 颜色黑色透明度0.5*/
    border-radius: 15px;
    /*边框圆角，四个角均为15px*/

    //设置相对位置使得位于上面
    .inputbox {
      input {
        // padding-top: 20px;

        min-width: 40%;

        //拉宽上下距离
        text-align: center;
        font-size: 16px;
        color: #fff;
        letter-spacing: 1px;
        /*字符间的间距1px*/
        padding: 10px 0;
        margin-bottom: 28px;

        border: none;
        border-bottom: 1.2px solid #ccc;
        border-radius: 10px;
        outline: none;
        /*outline用于绘制元素周围的线*/
        background: transparent;
        /*背景颜色为透明*/
      }

      label {
        /*<label> 标签为 input 元素定义标注（标记）*/
        // top: 0px;
        // left: 0px;
        // padding: 10px 0;
        font-size: 16px;
        color: #fff;
      }
    }
    .send {
      height: 35px;
      width: 125px;
      margin: 0 auto;
      margin-right: 0px;
      border: none;
      outline: none;
      font-size: 8px;
      color: #fff;
      background: #0e67db73;
      padding: 10px 10px;
      /* test-align: center; */
      cursor: pointer;
      /*光标呈现为指示链接的指针（一只手）*/
      border-radius: 10px;
    }
  }
  }

}
</style>


